// var text=document.getElementById('tt')
// 	text.onfocus=function(){
// 		if(text.placeholder=='语言开发'){//我焦点文本框它里面的值为‘手机’那么就消失
// 			text.placeholder='';
// 		}
// 	}
// 	text.onblur=function(){
// 		if(text.placeholder==''){
// 			text.placeholder='语言开发';
// 		}
// 		text.style.color='gray'
// 	}
	
window.addEventListener('load',function(){
	var arrowl=document.querySelector('.arrow-l')
	var arrowr=document.querySelector('.arrow-r')
	var focus=document.querySelector('.focus')
	var focusWith=focus.offsetWidth;
	focus.addEventListener('mouseenter',function(){
		arrowl.style.display='block';
		arrowr.style.display='block';
	})
	focus.addEventListener('mouseleave',function(){
		arrowl.style.display='none';
		arrowr.style.display='none';
	})
	//3.动态生成小圆圈
	var ul=focus.querySelector('ul');
	var ol=focus.querySelector('.circle')
	for(var i=0;i<ul.children.length;i++){
		//遍历创建li
		var li=document.createElement('li')
		//设置自定义属性
		li.setAttribute('index',i);
		ol.appendChild(li)
		li.addEventListener('click',function(){
			//4，排他思想
			for(var i=0;i<ol.children.length;i++){
				ol.children[i].className='';
			}
			this.className='current';
			//5.点击小圆圈移动图片，移动的是ul整体
			var index=this.getAttribute('index')
			animate(ul,-index * focusWith)
		})
	}
	// 默认抵押给圆圈是白色实心
	ol.children[0].className='current';
	//6.克隆图片，防止5个图6个小圆圈
	var first=ul.children[0].cloneNode(true);
	ul.appendChild(first);
	//7.点击右侧按钮进行滚动
	num=0;
	var circle=0;
	arrowr.addEventListener('click',function(){
		if(num==ul.children.length-1){
			num=0;
			ul.style.left=0;
		}
		num++;
		animate(ul,-num * focusWith);
		//8.按钮和小圆圈同步走动
		circle++;
		if(circle==ol.children.length){
			circle=0;
		}
		for(var i=0;i<ol.children.length;i++){
			ol.children[i].className='';
		}
		ol.children[circle].className='current';
	})
	
})
